<template>
    <fui-tabbar
        iconSize="30"
        iconUnit="rpx"
        selectedColor="#11347c"
        :tabBar="tabbarList"
        :current="appStore.tabbarCurrent"
        @click="handleChange"
    ></fui-tabbar>

    <publish ref="publishREF"></publish>
    <!--  <loginDialog></loginDialog>-->
</template>

<script lang="ts" setup>
import { useAppStore } from '../../stores/app'
import { useUserStore } from '../../stores/user'
import { useLogin } from '@/stores/login'
import { usePubListStore } from '@/stores/publist'
import { loginIm } from '@/utils/loginTIm'

const { getImageUrl } = useAppStore()
const publishREF = ref()
const appStore = useAppStore()
const { getUser, token, getImInfo, imInfo: im } = useUserStore()

console.log('tabbarList', appStore.getTabbarConfig)

const tabbarList = computed(() => {
    return appStore.getTabbarConfig.map((item: any, index: number) => {
        if (index === 2) {
            return {
                iconPath: getImageUrl(item.selected),
                width: 138,
                height: 138,
                bottom: 10,
                midButton: true
            }
        }

        return {
            iconPath: getImageUrl(item.unselected),
            selectedIconPath: getImageUrl(item.selected),
            text: item.link.name,
            link: item.link,
            pagePath: item.link.path
        }
    })
})
//  获取静态图片

// const showTabbar = computed(() => {
//     const currentPages = getCurrentPages()
//     const currentPage = currentPages[currentPages.length - 1]
//     const current = tabbarList.value.findIndex((item: any) => {
//         return item.pagePath === '/' + currentPage.route
//     })
//
//     console.log('current78979888888888888', current)
//     if (current > -1) {
//         appStore.tabbarCurrent = current
//     }
//
//     return current >= 0
// })
onShow(() => {
    const currentPages = getCurrentPages()
    const currentPage = currentPages[currentPages.length - 1]
    const current = tabbarList.value.findIndex((item: any) => {
        return item.pagePath === '/' + currentPage.route
    })

    console.log('current78979888888888888', current)
    if (current > -1) {
        appStore.tabbarCurrent = current
    }

    console.log('appStore.tabbarCurrent', appStore.tabbarCurrent)
})

onBeforeMount(() => {
    // uni.hideTabBar()
})

const handleChange = async (item: any) => {
    console.log('tabbar-item', item)
    if (item.index === 2) {
        // publishREF.value.show = true
        // uni.$emit('openPush')
        usePubListStore().showPubList = true
        return
    }
    // 跳转消息时  未登录 打开登录弹窗
    if (item.index === 3) {
        const IMRes = await loginIm()

        console.log('IMRes', IMRes)
        if (!IMRes) {
            return
        }
    }

    const pages = getCurrentPages()

    if (item.pagePath === '/' + pages[pages.length - 1].route) return

    const pagaIndex = tabbarList.value.findIndex((el: any) => el.pagePath === item.pagePath)
    if (pagaIndex >= 0) {
        appStore.tabbarCurrent = pagaIndex
    }
    uni.switchTab({
        url: item.pagePath
    })
    return
}

onLoad(() => {
    uni.hideTabBar()
})
</script>
<script lang="ts">
export default {
    options: {
        styleIsolation: 'shared' // 解除样式隔离
    }
}
</script>

<style lang="scss" scoped>
// :deep(.fui-tabbar__icon) {
//   width: 42rpx !important;
//   height: 42rpx !important;
// }

// :deep(.fui-tabbar__icon-wrap)  {
//   width: 42rpx !important;
//   height: 42rpx !important;
// }

// ::v-deep .fui-tabbar__mid-button {
//   &::after {
//     content: "";
//     width: 80%;
//     border-top: 1px solid #eee !important;
//     border-left: 1px solid #eee !important;
//     border-radius: 50%;
//     height: 80%;
//     position: absolute;
//     left: 0;
//     top: 0;
//     right: 0;
//     bottom: 0;
//     margin: auto;
//     z-index: 4;
//   }
// }

// ::v-deep .fui-tabbar__inner {
//   z-index: 5;
// }
</style>
